import { FC, ReactElement } from "react";
import { Image } from "@tarojs/components";
import { FlexView } from "../BUI";
import loading from "../../assets/loading.png";
import "./feedQRCode.css";

interface IProps {
  state: boolean;
  ContainerHeight: string;
}

const Mask: FC<IProps> = ({ state, ContainerHeight }): ReactElement => {
  return (
    <FlexView
      style={{
        width: "100%",
        height: `calc(${ContainerHeight} - 46px)`,
        backgroundColor: "#0101017b",
        transition: "all 0.5s linear",
        bottom: 0,
        display: !state ? "none" : "flex",
      }}
      justifyContent='center'
      alignItems='center'
      position='absolute'
    >
      <Image
        className='loadingIcon'
        style={{ width: 50, height: 50 }}
        src={loading}
      />
    </FlexView>
  );
};

export default Mask;
